import { LoginOutlined, UserOutlined } from '@ant-design/icons'
import { Avatar, Dropdown, MenuProps, Switch } from 'antd'
import { memo, useEffect } from 'react'

import reactLogo from '@/assets/react.svg'
import UserApi from '@/service/apis/UserApi'
import { useAuthStore } from '@/store/AuthStore'
import { useThemeStore } from '@/store/ThemeStore'

const Header = () => {
  console.log('header')

  const { mode, toggle } = useThemeStore()
  const { user, setUser, logout } = useAuthStore()

  useEffect(() => {
    const getUserInfo = async () => {
      const res = await UserApi.getUserInfo()
      if (res.success) {
        setUser(res.data)
      }
    }
    getUserInfo()
  }, [setUser])

  const items: MenuProps['items'] = [
    {
      key: 'logout',
      label: (
        <a onClick={logout}>
          <LoginOutlined />
          <span className="ml-2">logout</span>
        </a>
      ),
    },
  ]

  return (
    <header className="p-3 bg-base border-b">
      <div className="flex items-center">
        <div className="flex items-center">
          <img src={reactLogo} alt="" />
          <div className="ml-2">
            <h1 className="font-medium text-base leading-5 whitespace-nowrap">
              Tailwind css Header
            </h1>
            <p className="text-sm text-base">with vite react</p>
          </div>
        </div>

        <div className="flex justify-end flex-1 items-center">
          <Switch
            className="mr-2"
            onClick={toggle}
            checkedChildren="dark"
            unCheckedChildren="light"
            value={mode === 'dark'}
          />

          <div className="flex items-center ml-10">
            <Dropdown
              menu={{
                items,
              }}
              placement="bottom"
            >
              <a onClick={e => e.preventDefault()}>
                <Avatar size={'small'} icon={<UserOutlined />} />
                <span className="text-sm ml-1">{user.name}</span>
              </a>
            </Dropdown>
          </div>
        </div>
      </div>
    </header>
  )
}

export default memo(Header)
